var cpage = 0;
function pro_hot_shop_top10(p) {
    showTableAndEcharts();
    cpage = p;
    pro_hot_shop_top10_table();
    pro_hot_shop_top10_echart();
}

function pro_hot_shop_top10_table() {
    $.ajax({
        method: "POST",
        url: "proHotShopTop10ByPage",
        data: {
            page: cpage
        },
        success: function (data) {
            $("#tip").html("<h3>各省份热门商品top10统计表格</h3>");
            $("#echart-tip").html("<h3>各省份热门商品top10统计图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>省份</th><th>商品ID</th><th>商品名</th><th>浏览量</th><th>加入购物车量</th><th>购买量</th>");

            //重置表的数据
            $("tbody").empty();
            var jsonArr = JSON.parse(data);

            $.each(jsonArr, function (index, proHotShopTop10) {
                if (index % 2 == 0) {
                    $("tbody").append("<tr class='active'><td>"+proHotShopTop10.id+"</td><td>"+proHotShopTop10.province+"</td><td>"+proHotShopTop10.sid+
                        "</td><td>"+proHotShopTop10.sname+"</td><td>"+proHotShopTop10.viewCount+"</td><td>"+proHotShopTop10.cartCount+"</td><td>"+proHotShopTop10.parchaseCount+"</td></tr>")
                } else {
                    $("tbody").append("<tr class='info'><td>"+proHotShopTop10.id+"</td><td>"+proHotShopTop10.province+"</td><td>"+proHotShopTop10.sid+
                        "</td><td>"+proHotShopTop10.sname+"</td><td>"+proHotShopTop10.viewCount+"</td><td>"+proHotShopTop10.cartCount+"</td><td>"+proHotShopTop10.parchaseCount+"</td></tr>")
                }
            });

            $("tbody tr").on("mouseenter", this, function() {
                color = $(this).attr("class");
                $(this).removeClass(color);
                $(this).addClass("success");
            });
            $("tbody tr").on("mouseleave", this, function() {
                $(this).removeClass("success");
                $(this).addClass(color);
            });

            //循环获取分页的页数
            var pages = 0;
            $.ajax({
                method: "POST",
                url: "getProHotShopTop10Pages",
                success: function (data) {
                    pages = data;

                    //添加分组组件
                    var page = "<tr><td colspan='7'>";
                    page += "<nav aria-label='Page navigation'>";
                    page += "<ul class='pagination'>";
                    page += "<li>";
                    if (cpage > 1) {
                        page += "<a href='javascript:pro_hot_shop_top10("+(cpage - 1)+")' aria-label='Previous'>";
                    } else {
                        page += "<a href='javascript:pro_hot_shop_top10(1)' aria-label='Previous'>"
                    }
                    page += "<span aria-hidden='true'>&laquo;</span>";
                    page += "</a>";
                    page += "</li>";

                    //只显示10个分页
                    if (pages <= 10) {
                        for (var i = 1; i<=pages; i++) {
                            if (cpage == i) {
                                page += "<li class='active'><a href='javascript:pro_hot_shop_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                            } else {
                                page += "<li><a href='javascript:pro_hot_shop_top10("+i+")'>"+i+"</a></li>"
                            }
                        }
                    } else {
                        if (cpage <= 6) {
                            for (var i = 1; i<=10; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:pro_hot_shop_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:pro_hot_shop_top10("+i+")'>"+i+"</a></li>"
                                }
                            }
                        } else if (cpage > 6 && (cpage+4) <= pages) {
                            for (var i = cpage-5; i<=cpage+4; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:pro_hot_shop_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:pro_hot_shop_top10("+i+")'>"+i+"</a></li>"
                                }
                            }
                        } else {
                            for (var i = cpage-9; i<=cpage; i++) {
                                if (cpage == i) {
                                    page += "<li class='active'><a href='javascript:pro_hot_shop_top10("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                                } else {
                                    page += "<li><a href='javascript:pro_hot_shop_top10("+i+")'>"+i+"</a></li>"
                                }
                            }
                        }
                    }


                    page += "<li>";

                    if (cpage < pages) {
                        page += "<a href='javascript:pro_hot_shop_top10("+(cpage+1)+")' aria-label='Next'>"
                    } else {
                        page += "<a href='javascript:pro_hot_shop_top10("+pages+")' aria-label='Next'>"
                    }

                    page += "<span aria-hidden='true'>&raquo;</span>";
                    page += "</a>";
                    page += "</li>";
                    page += "</ul>";
                    page += "</nav>";
                    page += "</td></tr>";
                    $("tbody").append(page);
                    $("tbody tr:last-child td").css("text-align", "center")
                }
            });
        }
    })
}


function pro_hot_shop_top10_echart() {
    $.ajax({
        method: "POST",
        url: "proHotShopTop10",
        success: function (data) {

            //转换为json数组
            var jsonArr = JSON.parse(data);

            //清空原来的图表
            $("#dataEcharts div:gt(0)").remove();
            var snames = [];
            var views = [];
            var carts = [];
            var parchases = [];
            $.each(jsonArr, function (index, proHotShop) {
                snames.push(proHotShop.sname);
                views.push(proHotShop.viewCount);
                carts.push(proHotShop.cartCount);
                parchases.push(proHotShop.parchaseCount);
                //操作了10次
                if (index % 10 == 9) {
                    //添加容器
                    $("#dataEcharts").append('<div id='+'"main'+(index+1)+'" style="height: 400px; width: 700px"></div>');

                    //创建echarts对象
                    var chartDom = document.getElementById('main'+(index+1));

                    var name = proHotShop.province + "热门商品top10";

                    var myChart = echarts.init(chartDom);
                    var option = {
                        title: {
                            show: true,
                            text: name,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: "axis"
                        },
                        legend: {
                            data: ['浏览量', '加入购物车量', "销量"],
                            // left: "right",
                            x: "500px",
                        },
                        xAxis: {
                            type: 'category',
                            data: snames,
                            name: '商品名',
                            axisLabel: {
                                interval: 0,
                                rotate: -45,
                            },
                        },
                        grid: {
                            left: '100px',
                            bottom: '100px'
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: "浏览量",
                            data: views,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }, {
                            name: "加入购物车量",
                            data: carts,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }, {
                            name: "销量",
                            data: parchases,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }]
                    };

                    myChart.setOption(option);
                    //清空前一个图表的数据
                    snames = [];
                    views = [];
                    carts = [];
                    parchases = [];
                }
            })
        }
    });
}